<template>
    <view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true"><template #content><text class="text-darkgrey">{{$t('orderrefunds.list.25gggl')}}</text></template></cu-custom>
		<view class="search flex bg-white fixed padding-top-sm solid-bottom">
		    <view class="search-content round">
		        <text class="cuIcon-search padding-right-xs margin-left"></text>
		        <input type="text" :placeholder="$t('orderrefunds.list.l26cl7')" v-model="inputKey" confirm-type="search"/>
		    </view>
		    <view class="action">
		        <button class="cu-btn bg-blue round search-button margin-right-sm" @click="search">{{$t('bargain.bargainuser.655110')}}</button>
		    </view>
		</view>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
            <view >
                <view class="cu-list refund-list">
                    <view class="cu-item bg-white margin-bottom-xs"  v-for="data in dataList" :key="data.id">
                        <view class="flex justify-between">
							<navigator :url="'../order/detail?id='+data.orderId" class="padding-top text-darkgrey padding-left-sm padding-bottom-sm">
							    <text class="text-sm cuIcon-titles">{{$t('orderrefunds.detail.mvc086')}}{{data.orderInfo?data.orderInfo.orderNo+' ':''}}</text>
							</navigator>
                            <view class="">
                                <view class="text-xs cu-tag light bg-orange round">{{data.statusDesc}}</view>
                            </view>
                        </view>

                        <view class="cu-list menu-avatar flex justify-between padding-left align-center" >
                            <view class="cu-avatar img-box" :style="{'background-image':data.orderItem.picUrl?'url('+data.orderItem.picUrl+')':''}"></view>
                            <view class="content flex-sub padding-left padding-right text-sm">
                                <view class="text-darkgrey text-to-long" >{{data.orderItem.spuName}}</view>
                                <view class="text-purple-grey flex justify-between margin-top-xs">
                                    <text>{{$t('goodsappraises.list.5n08pj')}}{{data.orderItem.specInfo?data.orderItem.specInfo:$t('order.detail.44038b')}}</text>
                                    <text>x{{data.orderItem.quantity}}</text>
                                </view>
                                <view class=" margin-top-xs flex justify-between">
                                    <view class="text-darkgrey">{{$t('order.detail.287ftg')}}<text class="text-red text-xl text-bold text-price">{{data.orderItem.paymentPrice}}</text></view>
                                </view>
                            </view>
                        </view>
                        <view class="padding-left padding-right text-sm margin-top-xs padding-bottom">
							<view class="text-sm text-purple-grey margin-bottom-xs" >{{$t('orderrefunds.list.4ntxmi')}}{{data.refundTradeNo}}</view>
							<view class="text-sm text-purple-grey margin-bottom-xs" >{{$t('orderrefunds.detail.gnfhl6')}}<text class="">{{data.orderItem.isRefund == '1' ? $t('bargain.bargaininfo.377y1j') : $t('bargain.bargaininfo.50h7q2')}}</text>
							<text class="text-xs text-purple-grey margin-left-xs">{{$t('orderrefunds.detail.tyfn6q')}}</text>
							</view>
                            <view class="text-sm text-purple-grey margin-bottom-xs" >{{$t('orderrefunds.detail.xo7ypc')}}<text class="">{{data.refundReson}}</text></view>
                            <view class="text-sm text-darkgrey flex justify-between">
                                <view>{{$t('orderrefunds.detail.gmlnc2')}}<text class="text-price text-xl text-bold text-red margin-right-xs">{{data.refundAmount}}</text></view>
                                <view class="text-sm text-purple-grey padding-top-xs">{{data.createTime}}</view>
                            </view>
                        </view>
						<view class="padding-left padding-right text-sm margin-top-xs padding-bottom-sm flex justify-end">
						    <navigator :url="'detail?orderItemId='+data.orderItemId + '&orderNo='+data.orderInfo.orderNo" class="cu-btn round bg-blue shadow-blur">{{$t('bargain.bargainuser.f60nm4')}}</navigator>
						</view>
                    </view>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

    
    import {getPage} from '@/api/mall/orderrefunds'

    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {},
        onLoad(e){

        },
        onShow(){
            if(this.mescroll){
                this.mescroll.resetUpScroll(); //刷新
            }
        },
        data() {
            return {
                globalData: getApp().globalData,
                CustomBar: this.CustomBar,
                TabCur: 0,
                scrollLeft:0,
                tabs: [],
                inputKey:'',
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                downOption: {// 下拉刷新的配置(可选, 绝大部分情况无需配置)

                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                    page: {
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: this.$t('bargain.bargaininfo.m3k7oc')
                    }
                },
                // 列表数据
                dataList: []
            }
        },
        methods: {
            tabSelect(e) {
                this.TabCur = e.currentTarget.dataset.id;
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
                this.mescroll.resetUpScroll();
            },
            search (val) {
                this.mescroll.resetUpScroll();
            },
            /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            /*下拉刷新的回调, 有三种处理方式:*/
            downCallback(){
                this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
                this.mescroll.endSuccess()
            },
            /*上拉加载的回调*/
            upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let querySearch = '?current='+pageNum+'&size='+pageSize+'&descs=create_time';
                if(this.inputKey){
                    querySearch =  querySearch + '&refundTradeNo='+this.inputKey
                }
                getPage(querySearch).then(response=>{
                    if(response.data){
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = response.data.records;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        let totalSize = response.data.total;
                        //设置列表数据
                        if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
                        this.dataList = this.dataList.concat(curPageData); //追加新数据
                        // 请求成功,隐藏加载状态
                        this.mescroll.endBySize(curPageLen, totalSize);
                        setTimeout(()=>{
                            this.mescroll.endSuccess(curPageLen)
                        },20)

                    }
                });
            }
        }
    }
</script>

<style>
	.search{
		width: 100%;
		padding-bottom: 20rpx;
		position: fixed;
		z-index: 1024;
	}

	.search-content{
		background-color: #f5f5f5;
		line-height: 64upx;
		height: 64upx;
		font-size: 24upx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30upx;
	}

	.search-content input{
		flex: 1;
		padding-right: 30upx;
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		background-color: transparent;
	}

	.search-button{
		padding: 10rpx 30rpx 10rpx 30rpx;
	}

	.refund-list{
		margin-top: 100rpx;
	}

	.cu-tag{
		margin: 20rpx 10rpx 0 -5rpx !important;
	}

	.img-box{
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.button-bg{
		padding: 20rpx 40rpx 20rpx 40rpx;
	}

    .text-to-long{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
</style>
